<template>
  <div class="commtent">
    <nav-bar>
      <span slot="text">评价</span>
    </nav-bar>
    <div class="container">
      <div class="shop" v-if="orderDetail && orderDetail.shop_img">
        <img :src="imageUrl + orderDetail.shop_img" alt="" />
        <p>{{ orderDetail.shop_name }}</p>
      </div>
      <div class="score">
        <span
          class="stars"
          :class="item"
          v-for="(item, index) in selectStars"
          :key="index"
          @click="selectScore(index)"
        ></span>
      </div>
      <div class="content">
        <textarea
          v-model="commentValue"
          placeholder="亲，如果你觉得满意还请给个好评"
        ></textarea>
        <div class="upload">
          <div class="image_list">
            <li v-for="(item, index) in images" :key="index">
              <i
                class="iconfont icon-shanchushaixuanxiang"
                @click="deleteImg(index)"
              ></i>
              <img :src="imageUrl + item" alt="" />
            </li>
          </div>
          <label class="file">
            <i class="iconfont icon-jia"></i>
            <input
              id="file"
              type="file"
              name="file"
              @change="fileUpload"
              style="display: none;"
            />
          </label>
          <span v-if="!images.length">上传图片</span>
        </div>
      </div>
      <div class="btn" @click="submitComment">
        <button>提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderDetail, uploadImage, addComment } from '@/network/getData';
import { imageUrl } from '@/config/env';

export default {
  data() {
    return {
      imageUrl,
      shop_id: null,
      order_id: null,
      orderDetail: {},
      images: [],
      currentIndex: 0,
      commentValue: ''
    };
  },
  computed: {
    selectStars() {
      const arr = [];
      for (let i = 0; i < this.currentIndex; i++) {
        arr.push('on');
      }
      while (arr.length < 5) {
        arr.push('off');
      }
      return arr;
    }
  },
  mounted() {
    this.shop_id = this.$route.query.shopId;
    this.order_id = this.$route.query.orderId;
    this.initData();
  },
  methods: {
    async initData() {
      const order = await getOrderDetail(this.order_id);
      this.orderDetail = order.data;
    },
    // 图片上传
    fileUpload(e) {
      if (this.images.length >= 3) {
        console.log('最多只能上传3张图片');
        return false;
      }
      const data = new FormData();
      data.append('comment', e.target.files[0]);
      uploadImage(data).then(res => {
        this.images.push(res.data);
      });
    },
    // 删除图片
    deleteImg(index) {
      this.images.splice(index, 1);
    },
    // 选择评分
    selectScore(index) {
      this.currentIndex = index + 1;
    },
    // 添加评论
    submitComment() {
      if (this.currentIndex === -1) {
        console.log('请选择评分');
        return false;
      } else if (this.commentValue === '') {
        console.log('请输入评论内容');
        return false;
      }

      const obj = {
        order_id: this.order_id,
        content: this.commentValue,
        score: this.currentIndex,
        images: this.images
      };
      addComment(obj).then(res => {
        if (res.code === 200) {
          console.log(res.message);
          setTimeout(() => {
            this.$router.push('/home');
          }, 1000);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.commtent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  .container {
    position: absolute;
    top: 45px;
    width: 100%;
    .stars {
      display: inline-block;
      width: 30px;
      height: 29px;
      margin: 0 8px;
      background-size: 100%;
    }
    .on {
      background: url('~@/assets/stars/star24_on@3x.png');
    }
    .off {
      background: url('~@/assets/stars/star24_off@3x.png');
    }
  }
  .shop {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    color: #222;
    border-bottom: 1px solid #ccc;
    img {
      width: 35px;
      height: 35px;
      margin-right: 10px;
    }
  }
  .score {
    margin: 10px 0;
    text-align: center;
    img {
      margin: 0 5px;
    }
  }
  .content {
    text-align: center;
    textarea {
      width: 90%;
      height: 100px;
      padding: 8px;
      resize: none;
      font-size: var(--font-size);
      border: 1px solid #ccc;
    }
    .upload {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      .file {
        position: relative;
        display: inline-block;
        border: 1px dashed #ccc;
        width: 60px;
        height: 60px;
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 20px;
        }
      }
      .image_list {
        li {
          position: relative;
          display: inline-block;
        }
        img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
        }
        i {
          position: absolute;
          top: -3px;
          right: 10px;
          font-size: 20px;
          color: red;
        }
      }
      span {
        margin-left: 10px;
      }
    }
  }
  .btn {
    text-align: center;
    button {
      width: 90%;
      line-height: 30px;
    }
  }
}
</style>
